<template>
    <div class="bg-gray-50 min-h-screen flex items-center justify-center font-sans">
        <div class="text-center">
            <div class="mb-8">
                <div class="text-9xl font-bold text-emerald-600 mb-4">404</div>
                <h1 class="text-3xl font-bold text-gray-800 mb-4">页面未找到</h1>
                <p class="text-gray-600 mb-8 max-w-md mx-auto">
                    抱歉，您访问的页面不存在。可能是地址输入错误，或者页面已被移除。
                </p>
            </div>

            <div class="space-x-4">
                <button @click="goHome"
                    class="px-6 py-3 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors">
                    <i class="fas fa-home mr-2"></i>
                    返回首页
                </button>
                <button @click="goBack"
                    class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>
                    返回上页
                </button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const goHome = () => {
    router.push('/')
}

const goBack = () => {
    router.go(-1)
}
</script>

<style scoped>
.font-sans {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}
</style>
